<script setup lang="ts">
import { ref } from "vue";
import ColorManager from "../manager/colorManager";
const colorArr = ColorManager.get(0);


const colorBor = ref(colorArr.border);
const colorBoxS = ref(colorArr.boxShadow);
const colorText = ref(colorArr.text);


const props = defineProps<{
    width?: number
}>();

const paddWidth = ref((props.width || 20) + 'px');

</script>

<template>
    <div class="button-piano2-root">
        <button>
            <div class="vx-button-wepper">
                <span>
                    <slot></slot>
                </span>
            </div>

        </button>
    </div>

</template>

<style scoped lang="scss">
.button-piano2-root {
    width: fit-content;
    height: 55px;
    display: flex;
    align-items: flex-end;


    >button {
        font-size: 16px;
        height: 85%;
        padding: 0;
        margin: 0;
        background-color: v-bind(colorBoxS);
        outline: none;
        border: none;
        border-radius: 5px;
        display: flex;
        align-items: flex-start;
        transition: .2s;
        cursor: pointer;
        box-shadow:
            5px 5px 15px #a1a1a1,
            -5px -5px 15px #ffffff,
            0px 3px 5px v-bind(colorBoxS),
            3px 0px 5px v-bind(colorBoxS);

        &:hover {
            height: 95%;
        }

        &:active {
            height: 71.5%;
            box-shadow: 0 0 0 #a1a1a1;
        }

        .vx-button-wepper {
            background-color: #fff;
            color: v-bind(colorText);
            border: v-bind(colorBor) solid 2px;
            border-radius: 5px;
            padding: 8px v-bind(paddWidth);
        }
    }


}
</style>